<template>
  <t-dialog v-model:visible="formVisible" :header="$t('修改商品')" :width="680" :footer="false">
    <template #body>
      <!-- 表单内容 -->
      <t-form ref="form" :data="formData" :rules="rules" :label-width="100" @submit="onSubmit">
        <t-form-item :label="$t('pages.listCard.productName')" name="name">
          <t-input v-model="formData.name" :style="{ width: '480px' }" />
        </t-form-item>
        <t-form-item :label="$t('pages.listCard.productType')" name="type">
          <t-select v-model="formData.type" clearable :style="{ width: '480px' }">
            <t-option v-for="(item, index) in SELECT_OPTIONS" :key="index" :value="item.value" :label="item.label">
              {{ item.label }}
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item :label="$t('pages.listCard.productStatus')" name="isOnShelf">
          <t-radio-group v-model="formData.isOnShelf">
            <t-radio :value="true">{{ $t('pages.listCard.productStatusEnum.on') }}</t-radio>
            <t-radio :value="false">{{ $t('pages.listCard.productStatusEnum.off') }}</t-radio>
          </t-radio-group>
        </t-form-item>
        <t-form-item :label="$t('pages.listCard.productPrice')" name="price">
          <t-input v-model="formData.price" :style="{ width: '480px' }" />
        </t-form-item>
        <t-form-item v-if="formData.type !== 'service'" :label="$t('pages.listCard.productAmount')" name="rest">
          <t-input v-model="formData.rest" :style="{ width: '480px' }" />
        </t-form-item>
        <t-form-item :label="$t('pages.listCard.productDescription')" name="description">
          <t-input v-model="formData.describe" :style="{ width: '480px' }" />
        </t-form-item>
        <t-form-item :label="$t('pages.listCard.productImage')" name="mark">
          <t-textarea v-model="formData.img" :style="{ width: '480px' }" name="img" />
        </t-form-item>
        <t-form-item style="display: flex; justify-content: left; margin-left: 45px">
          <t-button theme="primary" type="submit" @click="modifyGoods">确定</t-button>
          <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import axios from 'axios';
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import type { PropType } from 'vue';
import { ref, watch } from 'vue';

import { addItem, addService } from '@/api/list';

export interface FormData {
  id: number;
  name: string;
  describe: string;
  price: number;
  img: string;
  rest: number;
  isOnShelf: boolean;
  type: string;
}

const INITIAL_DATA: FormData = {
  id: 0,
  name: '',
  describe: '',
  price: null,
  img: '',
  rest: null,
  isOnShelf: false,
  type: null,
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<FormData>,
});

const SELECT_OPTIONS = [
  { label: '商品', value: 'item' },
  { label: '服务', value: 'service' },
];
const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });
const type = ref('');
const textareaValue = ref('');

const onSubmit = ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    MessagePlugin.success('提交成功');
    formVisible.value = false;
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

const modifyGoods = async () => {
  try {
    if (formData.value.type === 'service') {
      // const obj = {
      //   name: formData.value.name,
      //   price: formData.value.price,
      //   img: formData.value.img,
      //   describe: formData.value.describe,
      //   isOnShelf: formData.value.isOnShelf,
      // };
      await axios.post('/api/admin/editService', {
        id: formData.value.id,
        name: formData.value.name,
        price: Number(formData.value.price),
        img: formData.value.img,
        isOnShelf: formData.value.isOnShelf,
        describe: formData.value.describe,
      });
    } else {
      // const obj = {
      //   id: formData.value.id,
      //   name: formData.value.name,
      //   price: formData.value.price,
      //   img: formData.value.img,
      //   describe: formData.value.describe,
      //   isOnShelf: formData.value.isOnShelf,
      //   rest: formData.value.rest,
      // };
      // console.log(obj);
      await axios.post('/api/admin/editItem', {
        id: formData.value.id,
        name: formData.value.name,
        price: Number(formData.value.price),
        img: formData.value.img,
        isOnShelf: formData.value.isOnShelf,
        describe: formData.value.describe,
        rest: Number(formData.value.rest),
      });
    }
  } catch (e) {
    console.log(e);
  } finally {
    console.log('修改成功');
  }
};

const onClickCloseBtn = () => {
  formVisible.value = false;
  formData.value = { ...INITIAL_DATA };
};

const emit = defineEmits(['update:visible']);
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);

const rules: FormRules<FormData> = {
  name: [{ required: true, message: '请输入商品名称', type: 'error' }],
  type: [{ required: true, message: '请选择商品类型', type: 'error' }],
  price: [{ required: true, message: '请输入商品价格', type: 'error' }],
  rest: [{ required: true, message: '请输入商品数量', type: 'error' }],
  describe: [{ required: true, message: '请输入商品描述', type: 'error' }],
  img: [{ required: true, message: '请输入商品图片', type: 'error' }],
};
</script>
